import React, { useEffect } from 'react';
import './styles/setting.less';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import AgentServer from '@/modules/Agent';
import { Divider, Spin } from 'antd';

const SubMenu = styled.p`
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
`;

const Setting = (props: { chooseMenu: (item: { id: number; label: string; children: any[]; i18nKey: string }) => void }) => {

	const { t } = useTranslation();
	const filterMenuWithPreference = (): { id: number; label: string; children: any[]; i18nKey: string }[] => {
		const { configure } = AgentServer
		let menus = [...configure.userSettings];
		if (configure.preferenceSettings.deviceConfigHidden) {
			menus = menus.filter(k => k.id !== 1);
		}
		if (configure.preferenceSettings.languageConfigHidden) {
			menus = menus.filter(k => k.id !== 3);
		}
		if (configure.preferenceSettings.acceptCallConfigHidden) {
			menus = menus.filter(k => k.id !== 4);
		}
		if (configure.preferenceSettings.floatAlertConfigHidden) {
			menus = menus.filter(k => k.id !== 5);
		}
		return menus.filter(k => k.visible);
	};

	useEffect(() => {
		const { otherWork } = AgentServer.configure

	}, [AgentServer.configure])

	const getSubMenus = (value: any) => {
		return value.children.map((item: any) => {
			if (item.status) {
				return <div key={item.i18nKey}>
					<SubMenu className='sub-menu'>
						<span>{t(item.i18nKey)}</span>
						<span className='menu-status'>{t(item.status)}</span>

					</SubMenu>
				</div>
			} else {
				return <div key={item.i18nKey}>
					<p className='sub-menu' >
						<span>{t(item.i18nKey)}</span>
					</p>
					<Divider />
				</div>
			}


		})
	}

	return (
		<>

			<div
				onClick={e => {
					e.stopPropagation();
				}}
			>
				{filterMenuWithPreference().map((item, index) => (
					<div
						className="menu-wrapper"
						key={item.id}
                        id={item.id === 5 ? 'float-alert-button' : ''}
						onClick={e => {
							e.preventDefault();
							e.stopPropagation();
							props.chooseMenu(item);
						}}
					>
						<p className="title">{t(item.i18nKey)}</p>
						<div className="menu">
							{
								getSubMenus(item)
							}

						</div>
						{index !== filterMenuWithPreference().length - 1 ? <p className="divider"></p> : null}
					</div>
				))}
			</div>

		</>
	);
};

export default Setting;
